import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import styles from './AddEditForm.less';
import { Modal, Form, Icon, Input, Button, Checkbox } from 'antd';

@Form.create()
class AddEditForm extends PureComponent {

  onOk = e => {
    if (!this.props.loading) {
      this.props.form.validateFields((err, values) => {
        if (!err) {
          new Promise((resolve, reject) => {
            this.props.onFormSubmit(values, resolve)
          }).then(() => {
            this.props.form.resetFields()
          })
        }
      });
    }
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const { modalVisible, onHideModal, loading } = this.props
    return (
      <div>
        <Modal
          title={ '新增' }
          visible={ modalVisible }
          onCancel={ onHideModal }
          footer={ [
            <Button key="back" onClick={ onHideModal }>
              取消
            </Button>,
            <Button key="submit" type="primary" loading={ loading } onClick={ this.onOk }>
              确认
            </Button>,
          ] }
        >
          <Form className="login-form">
            <Form.Item>
              { getFieldDecorator('username', {
                rules: [{ required: true, message: 'Please input your username!' }],
              })(
                <Input
                  prefix={ <Icon type="user" style={ { color: 'rgba(0,0,0,.25)' } }/> }
                  placeholder="Username"
                />,
              ) }
            </Form.Item>
            <Form.Item>
              { getFieldDecorator('password', {
                rules: [{ required: true, message: 'Please input your Password!' }],
              })(
                <Input
                  prefix={ <Icon type="lock" style={ { color: 'rgba(0,0,0,.25)' } }/> }
                  placeholder="Password"
                  autoComplete="new-password"
                />,
              ) }
            </Form.Item>
          </Form>
        </Modal>
      </div>
    );
  }
}

AddEditForm.propTypes = {
  loading: PropTypes.bool.isRequired,
  onHideModal: PropTypes.func.isRequired,
  onFormSubmit: PropTypes.func.isRequired,
  modalVisible: PropTypes.bool.isRequired
};

export default AddEditForm;
